<template>
  <div>
    <!-- 搜索 -->
    <inventorySearch @sear="search"></inventorySearch>
    <!-- 内容标题 -->
    <div class="content-title">
      <p>库存盘点</p>
      <el-button type="primary" @click="add()">新增盘点单</el-button>
    </div>
    <!-- 表格 -->
    <div class="tab-box">
      <el-table
        :data="inventoryCountData"
        style="width: 100%"
        :header-cell-style="{ background: '#F2F2F2' }"
      >
        <el-table-column prop="checkNo" label="盘点单号" width="180">
          <template slot-scope="inventoryCountData">
            <a
              :href="inventoryCountData.row.checkNo"
              @click.prevent="info(inventoryCountData.row.id)"
              class="TestCSS"
              >{{ inventoryCountData.row.checkNo }}
            </a>
          </template>
        </el-table-column>
        <el-table-column prop="preparer"  label="制单人" width="100">
        </el-table-column>
        <el-table-column
          prop="preparerTime"
          label="制单时间"
          :formatter="dateFormat"
          width="180"
        ></el-table-column>
        <el-table-column prop="reviewer" label="审核人" width="100">
        </el-table-column>
        <el-table-column
          prop="reviewerTime"
          label="审核时间"
          :formatter="dateFormat"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="record(scope.row.id)"
              v-if="scope.row.status == 0"
              >审核</el-button
            >
            <!--//@click="edit(scope.row)"-->
            <el-button
              type="text"
              size="small"
              @click="edit(scope.row.id)"
              v-if="scope.row.status == 0"
              >修改</el-button
            ><!--scope.$index, inventoryCountData-->
            <el-button
              type="text"
              v-if="scope.row.status == 1"
              style="color: gray"
              >已审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pager
        :total="total"
        :pageSize="pageSize"
        :currentPage="currentPage"
        @pageChange="pageChange"
      ></pager>

      <!-- 新增 修改盘点单窗口 审核弹窗-->
      <el-dialog
        width="70%"
        title=""
        :visible.sync="addBox"
        class="add-box"
        :close-on-click-modal="false"
        :showClose="false"
      >
        <div slot="title" class="dialog-title">
          <!-- <p>{{operationId}}</p> -->
          <p v-if="flag == 0">新增盘点单</p>
          <p v-else-if="flag == 1">修改盘点单</p>
          <p v-else-if="flag == 2">审核盘点单</p>
          <p v-else-if="flag == 3">盘点单详情</p>

          <div class="btns">
            <el-button type="info" @click="block()" class="fanhui">返回</el-button>
            <input
              class="input-file"
              type="file"
              @change="exportData"
              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            />
            <el-button v-if="recordFlag" type="success" @click="Improt"
              >批量导入</el-button
            >
            <el-button v-if="flag == 1" type="primary" @click="saveEdit"
              >编辑保存</el-button
            >
            <el-button v-else-if="flag == 2" type="primary" @click="saveRecord"
              >审核</el-button
            >
            <el-button v-else-if="flag == 0" type="primary" @click="save"
              >保存</el-button
            >
          </div>
        </div>
        <div class="info-box">
          <div class="top">
            <div>
              <p>制单人:</p>
              <el-input v-model="preparer" disabled></el-input>
            </div>
            <div>
              <p>制单时间:</p>
              <div class="block">
                <el-date-picker
                  v-model="preparerTime"
                  type="datetime"
                  placeholder="选择日期"
                  disabled
                >
                </el-date-picker>
              </div>
            </div>
            <div>
              <p v-if="flag == 3 && reviewer">审核人:</p>
              <el-input
                v-model="reviewer"
                v-if="flag == 3 && reviewer"
                disabled
              ></el-input>
            </div>
          </div>
          <div class="bottom">
            <div>
              <p>备注:</p>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="remarks"
                class="textarea"
                :disabled="!recordFlag"
              >
              </el-input>
            </div>
          </div>
        </div>

        <!-- 内容标题 -->
        <div class="content-title">
          <p>菜品</p>
          <el-button type="primary" @click="addVar()" v-if="recordFlag == true"
            >新增</el-button
          >
        </div>
        <div class="box-tab">
          <el-table
            :data="detailsData"
            :header-cell-style="{ background: '#F2F2F2' }"
            :class="{'scrollBar':detailsData.length >5}"
            
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <!-- <el-table-column property="id" label="库存id" width="100"></el-table-column> -->
            <el-table-column
              prop="dishNo"
              label="菜品编码"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="菜品名称"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="unit"
              label="菜品单位"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="stock"
              label="系统库存"
              width="100"
            ></el-table-column>

            <el-table-column prop="actualStock" label="实际库存" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.actualStock"
                  placeholder="请输入"
                  :disabled="!recordFlag"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="stockDifferent" label="库存出入" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.stockDifferent"
                  placeholder="请输入"
                  :disabled="!recordFlag"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remarks"
                  placeholder="请输入"
                  :disabled="!recordFlag"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" v-if="recordFlag == true">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="del(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <!-- 菜品库存弹窗 -->
      <el-dialog
        width="60%"
        title="菜品库存"
        :visible.sync="addVarBox"
        class="addVar-box"
      >
        <div class="search">
          <p>菜品名称：</p>
          <el-input
            v-model="dishName"
            placeholder="请输入菜品名称后，按enter键"
            @keyup.enter.native="queryByDishName()"
          ></el-input>
        </div>
        <div class="main-box">
          <div class="sel">
            <p>菜品类别</p>
            <ul>
              <!-- <li>炒菜</li>
              <li>蒸菜</li> -->
              <li
                v-for="item in childArr"
                :key="item.id"
                @click="getItem(item.id)"
              >
                {{ item.category }}
              </li>
            </ul>
          </div>
          <div class="infoParent">
            <div class="info">
              <div
                v-for="(item, index) in dishArray"
                :key="index"
                @click="changeSpan(item.dishNo, item)"
                :class="{ bgcolor: spanIndex.indexOf(item.dishNo) > -1 }"
              >
                <!-- @click="clickDish(item)"-->
                <img :src="item.image" alt="" />
                <!--../../assets/imgs/蛤蜊.png-->
                <div>
                  <p>{{ item.name }}</p>
                  <p>
                    库存:<span>{{ item.stock }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="page-box">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current_page"
                :page-sizes="[3, 6, 9, 12]"
                :page-size="page_size"
                layout="total, sizes, prev, pager, next"
                :total="total_dish"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addVarBox = false">取 消</el-button>
          <el-button type="primary" @click="temporarySave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import inventorySearch from "../../components/stock/inventorySeach.vue";
import pager from "../../components/common/pager.vue";
//导入字体图标
import "../../assets/fonts/font_gou/iconfont.css";
//导入excel
import XLSX from "xlsx";
export default {
  components: { inventorySearch, pager },
  data() {
    return {
      total: 0, //总页数
      pageSize: 5, //每页条数
      currentPage: 1, //当前页码

      current_page: 1,
      page_size: 9,
      total_dish: 0,

      currentAdd_page: 1,
      pageAdd_size: 5,
      totalAdd_dish: 0,

      inventoryCountData: [],
      //新增盘点单
      addBox: false,
      preparerTime: "", //制单时间
      preparer: sessionStorage.getItem('username'),
      remarks: "",

      detailsData: [],
      //新增菜品
      addVarBox: false,
      time: "",
      dishName: "",
      childArr: [],
      typeId: null,
      dishArray: [],
      flag: false,
      pushArr: [],
      spanIndex: [], //样式
      lists: [],

      //  修改操作
      editData: [],
      operationId: 0, //修改保存要使用
      //盘点
      recordFlag: false, //批量导入按钮标识 新增按钮
      flag: 0, //0 新增  1修改 2审核 3详情 （保存按钮以及弹窗标题）
      //审核人
      reviewer: 0,
      //导入excel
      type: String,
    };
  },
  methods: {
    dateFormat(row, column, cellValue, index) {
      let date = new Date(parseInt(cellValue));
      let date1 = row[column.property];
      if (date1 == undefined || date1 == null) {
        return "";
      }
      let Y = date.getFullYear() + "-";
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1) + "-"
          : date.getMonth() + 1 + "-";
      let D =
        date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
      let h =
        date.getHours() < 10
          ? "0" + date.getHours() + ":"
          : date.getHours() + ":";
      let m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D == "NaN-NaN-NaN" ? "" : Y + M + D + " " + h + m + s; //不要 时分秒
    },
    //页码、显示条数改变
    pageChange(v) {
      this.pageSize = v.pageSize;
      this.currentPage = v.currentPage;
      this.getData(this.currentPage, this.pageSize, this.time);
    },
    //库存盘点列表
    async getData(page, pageSize, time) {
      try {
        const { data: res } = await this.axios.post("/stockCheck/list", {
          page: page,
          pageSize: pageSize,
          time: time,
        });
        if (res.code == 200) {
          this.inventoryCountData = res.data;
          this.total = res.count;
          // console.log(res.data)
        }
      } catch (error) {
        console.error(error);
      }
    },
    search(v) {
      this.inventoryCountData = v.sta;
      this.total = v.count;
      this.time = v.time;
    },
    
    //审核盘点
    record(id) {
      this.flag = 2;
      this.recordFlag = false;
      this.operationId = id;
      this.addBox = true;
      this.axios
        .post("/stockCheck/" + id, {
          page: this.currentAdd_page,
          pageSize: this.pageAdd_size,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let sta = res.data.data;
            this.detailsData = sta.lists;
            this.pushArr = sta.lists;
            this.totalAdd_dish = sta.lists.length;
            this.preparer = sta.preparer;
            this.preparerTime = sta.preparerTime;
            this.remarks = sta.remarks;
          }
        });
    },
    //审核保存
    saveRecord() {
      this.axios.get("/stockCheck/" + this.operationId).then((res) => {
        if (!res.data.error) {
          console.log(this.operationId);
          this.$message.success("审核成功");
          this.addBox = false;
          this.getData(this.currentPage, this.pageSize, this.time);
        } else {
          this.$message.error("保存失败");
        }
      });
    },
    //详情
    info(id) {
      this.flag = 3;
      this.recordFlag = false;
      this.addBox = true;
      // console.log('获取当前选择的列',id)
      this.axios
        .post("/stockCheck/" + id, {
          page: this.currentAdd_page,
          pageSize: this.pageAdd_size,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let sta = res.data.data;
            this.detailsData = sta.lists;
            this.pushArr = sta.lists;
            this.totalAdd_dish = sta.lists.length;
            this.preparer = sta.preparer;
            this.preparerTime = sta.preparerTime;
            this.remarks = sta.remarks;
            this.reviewer = sta.reviewer;
          }
        });
    },
    //新增盘点
    add() {
      //新增前 先清除 开始改
      // this.detailsData=[];
      this.flag = 0;
      this.recordFlag = true;
      this.addBox = true;
      let that = this;
      this.getDateTime(); //获取当前时间显示在date-picker
      setInterval(that.getDateTime, 1000); //监控时间的变化
    },

    //新增保存
    save() {
      this.lists = this.pushArr;

      this.axios
        .post("/stockCheck/add", {
          lists: this.lists,
          preparer: this.preparer,
          preparerTime: this.preparerTime,
          remarks: this.remarks,
        })
        .then((res) => {
          if (!res.data.error) {
            this.$message.success("保存成功");
            console.log("pushArr", this.pushArr);
            console.log("lists", this.lists);
            this.addBox = false;
            //清除
            this.pushArr = [];
            this.spanIndex = [];
            this.detailsData = [];

            this.getData(this.currentPage, this.pageSize, this.time);
          } else {
            this.$message.error("保存失败");
          }
        });
    },

    //获取当前时间
    getDateTime() {
      if (this.flag == 0) {
        //解决除了新增时候，时间会定时系统时间
        this.preparerTime = new Date();
      }
    },

    //修改盘点index, data
    edit(id) {
      this.flag = 1;
      this.operationId = id; //修改保存要使用
      this.recordFlag = true;
      this.addBox = true;
      this.axios
        .post("/stockCheck/" + id, {
          page: this.currentAdd_page,
          pageSize: this.pageAdd_size,
        })
        .then((res) => {
          if (res.data.code == 200) {
            let sta = res.data.data;
            this.detailsData = sta.lists;
            this.pushArr = sta.lists;
            this.totalAdd_dish = sta.lists.length;
            this.preparer = sta.preparer;
            this.preparerTime = sta.preparerTime;
            this.remarks = sta.remarks;
            //修改时候把图片的编码存放到spanIndex
            for (let i in sta.lists) {
              this.spanIndex.push(sta.lists[i].dishNo);
            }
            console.log(this.pushArr);
          }
        });
    },
    //修改保存
    saveEdit() {
      this.lists = this.pushArr;

      this.axios
        .post("/stockCheck/update", {
          lists: this.lists,
          id: this.operationId,
          preparer: this.preparer,
          preparerTime: this.preparerTime,
          remarks: this.remarks,
        })
        .then((res) => {
          if (!res.data.error) {
            this.$message.success("保存成功");
            //  console.log('pushArr',this.pushArr);
            //  console.log('lists',this.lists)
            this.addBox = false;
            //清除
            this.pushArr = [];
            this.spanIndex = [];
            this.detailsData = [];

            this.getData(this.currentPage, this.pageSize, this.time);
          } else {
            this.$message.error("保存失败");
          }
        });
    },
    //返回按钮
    block() {
      //  this.$router.go(-1);
      // this.$router.back();
      this.addBox = false;
      //清除
      this.pushArr = [];
      this.spanIndex = [];
      this.detailsData = [];
      // let that=this;
      // clearInterval(that.getDateTime);
    },
    // 新增菜品
    addVar() {
      //清除
      // this.pushArr=[];
      // this.spanIndex=[];

      this.addVarBox = true;
      this.getType();
      this.getDish(
        this.current_page,
        this.page_size,
        this.dishName,
        this.typeId
      );
    },
    //获取菜品类型
    getType() {
      this.axios.get("/stock/type").then((res) => {
        let sta = res.data.data;
        this.childArr = []; //获取前  先清空数组
        for (let i in sta) {
          this.childArr.push(sta[i]);
        }
      });
    },

    //获取菜品类型id
    getItem(id) {
      this.typeId = id;
      this.getDish(
        this.current_page,
        this.page_size,
        this.dishName,
        this.typeId
      );
    },
    //查询菜品信息
    async getDish(page, pageSize, dishName, typeId) {
      try {
        const { data: res } = await this.axios.post("/stockCheck/findStock", {
          page: page,
          pageSize: pageSize,
          dishName: dishName,
          typeId: typeId,
        });
        // console.log('res',res)
        this.total_dish = res.count;
        this.dishArray = res.data;
        console.log("数据", res.data);
      } catch (error) {
        console.error(error);
      }
    },
    //根据菜品名称查询数据
    queryByDishName() {
      this.getDish(
        this.current_page,
        this.page_size,
        this.dishName,
        this.typeId
      );
    },
    //菜品图片分页
    handleSizeChange(size) {
      // console.log(`每页 ${val} 条`);
      this.page_size = size;
      // console.log('这是每页条数',size);
      this.getDish(
        this.current_page,
        this.page_size,
        this.dishName,
        this.typeId
      );
    },
    handleCurrentChange(currentPage) {
      // console.log(`当前页: ${val}`);
      this.current_page = currentPage;
      // console.log('当前第几页',currentPage);
      this.getDish(
        this.current_page,
        this.page_size,
        this.dishName,
        this.typeId
      );
    },

    changeSpan(index, item) {
      let arrIndex = this.spanIndex.indexOf(index);
      //  console.log(arrIndex);

      if (arrIndex > -1) {
        this.spanIndex.splice(arrIndex, 1);
        this.pushArr.splice(item, 1);
      } else {
        this.spanIndex.push(index);
        this.pushArr.push(item);
      }
      // console.log('pushArr',this.pushArr)
    },
    //暂时保存
    temporarySave() {
      this.detailsData = this.pushArr;
      // console.log(this.pushArr)
      this.addVarBox = false;
      console.log(this.detailsData);
    },
    //移除
    del(row) {
      // console.log(row)
      this.detailsData.splice(row, 1);
    },

    //导入按钮
    Improt() {
      document.querySelector(".input-file").click();
    },

    exportData(event) {
      if (!event.currentTarget.files.length) {
        return;
      }
      const that = this;
      // 拿取文件对象
      var f = event.currentTarget.files[0];
      // 用FileReader来读取
      var reader = new FileReader();
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = "";
        var wb; // 读取完成的数据
        var outdata; // 你需要的数据
        var reader = new FileReader();
        reader.onload = async ()=>{
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          // 接下来就是xlsx了，具体可看api
          wb = XLSX.read(binary, {
            type: "binary",
          });
          that.detailsData = await XLSX.utils.sheet_to_json(
            wb.Sheets[wb.SheetNames[0]]
          )
        };
        reader.readAsArrayBuffer(f);
      };
      reader.readAsBinaryString(f);
    },
  },
  // watch:{
  //
  // },
  mounted() {
    this.getData(this.currentPage, this.pageSize, this.time);
  },
};
</script>

<style lang="less" scoped>
* {
  font-family: "微软雅黑";
  font-weight: 400;
  color: "#333";
  list-style: none;
}
.input-file {
  display: none;
  
}
// 内容标题
.content-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0.1rem solid #dbe0e9;
  margin-top: 1rem;
  height: 4.5rem;
  background: #f2f2f2;
  padding: 0 2rem;
  .el-button {
    height: 3.8rem;
    padding: 0 1.5rem;
  }
  p {
    font-size: 1.6rem;
  }
}
// 表格样式
.tab-box {
  padding: 1.5rem;
  border: 0.1rem solid #dbe0e9;
  background: #fff;
  border-top: none;
  .el-table {
    border: 0.1rem solid #dbe0e9;
  }
  /deep/.el-table td,
  .el-table th {
    padding: 0.5rem 0;
  }
  // 表格数据居中
  /deep/.el-table .cell,
  .el-table--border td:first-child .cell,
  .el-table--border th:first-child .cell {
    text-align: center;
  }
}

//新增盘点单样式
.add-box {
  .dialog-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 1.6rem;
    }
    .el-button {
      height: 3.5rem;
    }
  }
  .el-table {
    margin-top: 2rem;
  }
  /deep/.el-dialog__header {
    padding: 0.8rem 2rem;
    background: #f2f2f2;
  }
  /deep/.el-dialog__body {
    padding: 1.5rem 2rem;
  }
  .info-box {
    border: 0.1rem solid #dbe0e9;
    padding: 1rem 1rem;
    .top {
      display: flex;

      div {
        display: flex;
        align-items: center;
        // padding: 1rem 1rem;
        p {
          width: 30%;
          display: flex;
          justify-content: flex-end;
        }
        &:nth-child(2) {
          margin-left: 2.3rem;
        }
      }
    }
    .bottom {
      div {
        display: flex;
        align-items: center;
        padding: 0.5rem 1rem 0;
        p {
          width: 5%;
          display: flex;
          justify-content: flex-start;
        }
        .el-input {
          width: 80%;
        }
      }
    }
  }

  .scrollBar{
      height: 30rem;
      overflow-y:auto;
     
    }
   .scrollBar::-webkit-scrollbar{
        width: 0.8rem;     /*高宽分别对应横竖滚动条的尺寸*/
        // height: 0.2rem;
      }
    .scrollBar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    background: rgba(0,0,0,0.3);
    
    }

  //1弹窗里面的tab

  .box-tab {
    padding: 0 2rem 2rem;
    border: 0.1rem solid #dbe0e9;
    
  }
  // 内容标题
  .content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 0.1rem solid #dbe0e9;
    border-bottom: 0;
    margin-top: 1rem;
    height: 4.5rem;
    background: #f2f2f2;
    padding: 0 2rem;
    .el-button {
      height: 3.8rem;
      padding: 0 1.5rem;
    }
    p {
      font-size: 1.6rem;
    }
  }
}

//新增菜品弹窗样式
/deep/.el-dialog__header {
  padding: 1rem 2rem;
  background: #f2f2f2;
}
.addVar-box {
  .search {
    display: flex;
    align-items: center;
    p {
      width: 11%;
    }
  }
  .main-box {
    display: flex;
    width: 100%;
    margin-top: 2rem;

    .sel {
      border: 0.1rem solid #dbe0e9;
      width: 25%;
      height: 100%;
      p {
        height: 3rem;
        background: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      ul li {
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0.1rem solid #dbe0e9;
        border-left: none;
        border-right: none;
        border-bottom: none;
        &:hover {
          background: #f5f7fa;
          cursor: pointer; //改变光标的形状
        }
        //  &:last-child{
        //     // border-top: none;
        //  }
      }
    }

    .bgcolor {
      background: rgba(150, 150, 150, 0.1);
      // background-image: url(../../assets/imgs/gou1.webp);
      opacity: 0.5;
    }
    .infoParent {
      width: 71.5%;
    }

    .info {
      width: 100%;
      border: 0.1rem solid #dbe0e9;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      margin-left: 2rem;
      & > div {
        border: 0.1rem solid #dbe0e9;
        height: 15rem;
        width: 15rem;
        margin: 1rem 0;
        img {
          width: 15rem;
          height: 12rem;
        }
        div {
          display: flex;
          justify-content: space-around;
          align-items: center;
          p {
            display: inline-block;
            span {
              color: red;
            }
          }
        }
      }
    }
    .page-box {
      width: 100%;
      margin-left: 2rem;
      display: flex;
      justify-content: center;
      margin-top: 1rem;
    }
  }
  
}
.fanhui{
    margin-right:1rem ;
  }
</style>